<template>
  <div ref="editorContainer" class="editor-container"></div>
</template>
<script>
import { onMounted, ref, onBeforeUnmount } from "vue";
import loader from "@monaco-editor/loader";
export default {
  setup() {
    const editorContainer = ref(null);
    let editor;
    let model;

    onMounted(() => {
      loader.config({ "vs/nls": { availableLanguages: { "*": "zh-cn" } } });
      loader.init().then((monaco) => {
        // 创建一个新的模型
        model = monaco.editor.createModel("//在这里编写你的代码", "javascript");
        // 创建编辑器并绑定模型
        editor = monaco.editor.create(editorContainer.value, {
          model: model,
          //主题
          theme: "vs-dark",
          // 是否启用预览图
          minimap: true,
          // 圆角
          roundedSelection: true,
          // 主键
          multiCursorModifier: "ctrlCmd",
          // 滚动条
          scrollbar: {
            verticalScrollbarSize: 8,
            horizontalScrollbarSize: 8,
          },
          // 行号
          lineNumbers: "off",
          // tab大小
          tabSize: 2,
          //字体大小
          fontSize: 16,
          // 控制编辑器在用户键入、粘贴、移动或缩进行时是否应自动调整缩进
          autoIndent: "advanced",
          // 自动布局
          automaticLayout: true,
        });
        // 监听模型内容变化
        model.onDidChangeContent(() => {
          console.log("内容已更改:", model.getValue());
        });
      });
    });

    onBeforeUnmount(() => {
      if (editor) {
        editor.dispose();
      }
      if (model) {
        model.dispose();
      }
    });

    return {
      editorContainer,
    };
  },
};
</script>
<style scoped>
.editor-container {
  border: 1px solid #ccc;
  width: 500px;
  height: 500px;
}
</style>
